import 'package:flutter/material.dart';
import 'package:gameplay_flutter/lib_baseview/theme/jr.dart';
import 'package:provider/provider.dart';

import '../../../../lib_baseview/lib_baseview.dart';
import '../../../m_chatroom.dart';

import 'chat_room_tap_bar_model.dart';

import '../../../../../lib_runtime/extension/widget/widget_wrapper.dart';
import '../../../../../lib_runtime/extension/string_extension/string_text.dart';

class ChatRoomTopBar extends StatelessWidget {
  const ChatRoomTopBar({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProxyProvider<RootProxyModel, ChatRoomTapBarModel>(
          create: (context) => ChatRoomTapBarModel(),
          update: (context, rootProxyModel, leafModel) {
            if (leafModel == null) throw ArgumentError.notNull('leafModel');
            leafModel.roomModel = rootProxyModel;
            return leafModel;
          },
        ),
      ],
      child: Column(
        children: [
          Consumer<ChatRoomTapBarModel>(builder: (context, model, child) {
            return _buildContent(context, model);
          }),
        ],
      ),
    );
  }

  Widget _buildContent(BuildContext context, ChatRoomTapBarModel model) {
    return SizedBox(
      width: double.infinity,
      height: 52,
      child: Row(
        children: [
          userBaseInfoWidget(context, model),
          const Spacer(),
          rightWidget(context, model),
        ],
      ),
    );
  }

  /// 左侧用户头像
  Widget userBaseInfoWidget(BuildContext context, ChatRoomTapBarModel model) {
    return Container(
      decoration: BoxDecoration(
          color: const Color(0xFFFFFFFF).withAlpha((0.05 * 255).toInt()),
          borderRadius: const BorderRadiusDirectional.only(
            topEnd: Radius.circular(52 / 2.0),
            bottomEnd: Radius.circular(52 / 2.0),
          )),
      width: 200,
      height: double.infinity,
      child: Row(
        children: [
          Padding(
              padding: const EdgeInsetsDirectional.only(start: 15),
              child: model.info?.icon != null
                  ? image(
                      model.info?.icon ?? '',
                      width: 40,
                      height: 40,
                    ).corner(radius: 40 / 2.0)
                  : const SizedBox.shrink()),
          const SizedBox(width: 8),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              (model.info?.name ?? '').text(
                  color: const Color(0xFFFFFFFF),
                  fontSize: 16,
                  maxWidth: 95,
                  maxLines: 1,
                  weight: TextFontWeight.medium),
              if (model.info?.id != null)
                'ID:${model.info?.id}'.text(
                    color: const Color(0xFFFFFFFF),
                    fontSize: 14,
                    weight: TextFontWeight.medium),
            ],
          ),
          const Spacer(),
          JR.img('room/room_un_follow.png', width: 30, height: 30),
          const SizedBox(width: 10),
        ],
      ),
    );
  }

  /// 右侧分享 和 退出
  Widget rightWidget(BuildContext context, ChatRoomTapBarModel model) {
    return Padding(
      padding: const EdgeInsetsDirectional.only(end: 15),
      child: Row(
        children: [
          JR.img('room/room_exit.png', width: 30, height: 30).onTap(() {
            model.clickBack(context);
          }),
          const SizedBox(width: 12),
          JR.img('room/room_share.png', width: 30, height: 30).onTap(() {
            model.clickShare(context);
          }),
        ],
      ),
    );
  }
}
